import React from 'react';
import { Typography, Card, Space, Button } from 'antd';
import { Link } from 'react-router-dom';

const { Title, Paragraph } = Typography;

const Home = () => {
  return (
    <div>
      <Title level={2}>APIJSON + Spring Boot 3 + React 演示</Title>
      <Paragraph>
        这是一个使用APIJSON、Spring Boot 3和React构建的示例应用程序。
        APIJSON是一种JSON传输协议，可以让前端自定义请求和响应的结构。
      </Paragraph>
      
      <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
        <Card title="功能示例" style={{ width: '100%' }}>
          <Space>
            <Button type="primary">
              <Link to="/users">用户列表</Link>
            </Button>
            <Button type="primary">
              <Link to="/moments">动态列表</Link>
            </Button>
            <Button type="primary">
              <Link to="/api-test">API测试</Link>
            </Button>
          </Space>
        </Card>
        
        <Card title="APIJSON 特点" style={{ width: '100%' }}>
          <ul>
            <li>自定义请求：前端可以自定义请求结构，定义需要的数据</li>
            <li>自动生成SQL：后端自动将JSON请求转换为SQL查询</li>
            <li>多表关联查询：一次请求可获取多个表的关联数据</li>
            <li>分页、排序、筛选：支持各种数据操作功能</li>
            <li>安全性：支持角色访问控制和请求验证</li>
          </ul>
        </Card>
      </Space>
    </div>
  );
};

export default Home;
